<!DOCTYPE html>
<html lang="en">
	<head>
        <meta name="layout" content="files">
        <title>火堆</title> 
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user_auth.css')}" type="text/css">
        <link rel="stylesheet" type="text/css" href="../frozen/css/frozen.css">
    	<link rel="stylesheet" type="text/css" href="../css/default.css">
    	<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
    	<script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
    	<script type="text/javascript" src="${resource(dir: 'js', file: 'area.js')}"></script>
    	<script type="text/javascript" src="../js/user_auth.js"></script>
    	<link rel="stylesheet" type="text/css" href="../css/user_auth.css">
    	<style>
    		.dialog-step .dialog-box {
	    		height: 350px;
	    	}
		    .form-common input.canNotNull ,.form-common textarea.canNotNull { 
		      border-color: #E9666B;
		      outline: 0;
		      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 127, 0.6);
		      box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 137, 0.6);
		  }
		  div.img-box.canNotNull{
		      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 127, 0.6)!important;
		      box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233, 102, 137, 0.6);
		      border: 1px solid #E9666B!important;
		  }
		  
 #Idimg ,#Idimgre {
    background-image: url(../images/icon-cross.png);
    
    background-size: 34px;
    background-position: center;
}
		</style>
    </head>
<body>
	<div class="dialog-step show">
        <div class="dialog-box">
            <h4>实名认证授权</h4>
            <div class="txt">
					<p>首次发起项目需要进行个人实名信息认证。</p>
                    <p>火堆平台通过验证用户个人身份信息确保平台用户真实可信，您的身份信息将被加密保护。</p>
                    <p>认证过程中需授权火堆向前海征信“好信认证”获取您的好信分，同意请点“同意授权并进入认证”。</p>
            </div>
            <div class="btn-red btn-close">同意授权并进入认证</div>
        </div>
    </div>
	<section class="ui-container">
        <ul class="step-navi">
            <li class="active">身份资料</li>
            <li>绑定银行卡</li>
            <li>验证手机号</li>
            <li>认证完成</li>
        </ul>
        <form action="" class="form-common2">
            <div class="step step1 show">

				<footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="if(checkIdInfo()){goStep(2);}">下一步</button>
                    </div>
                </footer>
                <div class="u-module">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">真实姓名</label>
                        <input type="text" placeholder="真实姓名" id="realName">
                    </div>
                    <div class="ui-form-item  ui-border-b">
                        <label for="#">身份证号</label>
                        <div class="form-photo-box">
                            <i data-link="#img1"></i>
                            <input type="text" placeholder="身份证号" id="idNumber" onchange="checkIdNumber(this)">
                        </div>
                    </div>
                </div>
                 <p style="font-size:12px;padding:0 15px 0 15px;color:#979797">个人上传身份证，慈善组织上传法人登记证和组织机构代码证</p>
                <ul class="ui-justify">
               
                    <li>
                        <div class="form-single-img">
                            <p>示例</p>
                            <div class="img-box" style="background-image:url(../images/demo/demo-card-1.jpg)"></div>
                        </div>
                    </li>
                    <li>
                        <div class="form-single-img">
                        	<p>证件一</p>
                            <div class="img-box" id="Idimg">
                                <input type="file" name="img" id="img">
                                <input type="hidden" name="identifyimg" id="identifyimg" value="">
                            </div>
                            <%--
                            <p>上传身份证正面照</p>
                            <div class="img-box plus">
                                <input type="file" id="img1">
                            </div>
                            --%>
                        </div>
                    </li>
                    </ul>
                    <ul class="ui-justify">
                    <li>
                        <div class="form-single-img">
                            <p>示例</p>
                            <div class="img-box" style="background-image:url(../images/demo/demo-card-2.jpg)"></div>
                        </div>
                    </li>
                    <li>
                        <div class="form-single-img">
                        	<p>证件二</p>
                            <div class="img-box" id="Idimgre">
                                <input type="file" name="imgre" id="imgre">
                                <input type="hidden" name="identifyimgre" id="identifyimgre" value="">
                            </div>
                        </div>
                    </li>
                	</ul>
                <div class="u-module">
                    <div class="ui-form-item ui-border-tb">
                        <label for="#">所在机构</label>
                        <input type="text" placeholder="如：上海紫罗兰小学语文教师" id="school">
                    </div>
                    <div class="ui-form-item ui-border-b ui-form-item-textarea">
                        <label for="#">简介描述</label>
                        <textarea class="count"  placeholder="用简洁有趣的文字介绍一下你自己，越清晰的描述越能让更多人信任你。" oninput="checkWords(this, 800)" onblur="subWord(this,800)" id="description"></textarea>
                        <div class="form-unit count">800</div>
                    </div>
                    
                </div>
            </div>

            <div class="step step2">
            <footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                    	<button type="button" class="btn-footer btn-red" onclick="goStep(1);">上一步</button>
                    	<span style="margin-left:1px"></span>
                        <button type="button" class="btn-footer btn-red" onclick="if(checkBankInfo()){goStep(3);}">下一步</button>
                    </div>
            </footer>
            <div class="u-module">
                    <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-t" style="border-bottom:none;>
                        <label for="#">开户行</label>
                        <select name="" id="bankName">
                            <option value="0" selected disabled>选择开户行</option>
		                    <option value="1">中国工商银行</option>
		                    <option value="2">中国建设银行</option>
		                    <option value="3">中国银行</option>
		                    <option value="4">中国农业银行</option>
		                    <option value="5">交通银行</option>
		                    <option value="6">招商银行</option>
		                    <option value="7">中国邮政储蓄银行</option>
		                    <option value="8">中信银行</option>
		                    <option value="9">光大银行</option>
		                    <option value="10">民生银行</option>
		                    <option value="11">兴业银行</option>
		                    <option value="12">华夏银行</option>
		                    <option value="13">上海浦发银行</option>
		                    <option value="14">深圳发展银行</option>
		                    <option value="15">广东发展银行</option>
		                    <option value="16">上海银行</option>
		                    <option value="17">平安银行</option>
		                    <option value="18">北京银行</option>
		                    <option value="19">南京银行</option>
		                    <option value="20">宁波银行</option>
		                    <option value="21">江苏银行</option>
		                    <option value="22">甘肃银行</option>
		                    <option value="23">农村信用合作社</option>
		                    <option value="24">农村商业银行</option>
                        </select>
                    </div>
                   
                    <div class="u-module" style="margin-bottom:0px;">
		                <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-t" ">
		                <label for="#">开户支行</label>   
		                    <select name="" id="s_province">
		                        <option value="0" selected="" disabled="">选择省</option>
		                    </select>
		                </div>
		                <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-tb">
		                    <select name="" id="s_city">
		                        <option value="0" selected="" disabled="">选择市</option>
		                    </select>
		                </div>
		                 <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b" style="display:none">
		                    <select name="" id="s_county">
		                        <option value="0" selected="" disabled="">选择区县</option>
		                    </select>
		                </div>
            		</div>
 					<div class="ui-form-item  ui-border-b">
                        <label for="#"></label>
                        <input type="text" placeholder="支行名，例如：城北支行" id="subBranch">
                    </div>
                    <div class="ui-form-item  ui-border-b">
                        <label for="#">银行卡号</label>
                        <input type="text" placeholder="银行卡号（本人）" id="bankCard" onchange="checkBankNumber(this)">
                    </div>
                </div>
                
            </div>

            <div class="step step3">
            	<footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                    	<button type="button" class="btn-footer btn-red" onclick="goStep(2);">上一步</button>
                    	<span style="margin-left:1px"></span>
                        <button type="button" class="btn-footer btn-red" onclick="submitAuthInfo()">提交</button>
                    </div>
                </footer>
                
                <div class="ui-form-item ui-form-item-show ui-border-tb">
                    <label for="#">手机号</label>
                    <input type="text" placeholder="" id="mobile" onchange="checkPhoneNumber(this)">
                </div>
                <div class="ui-form-item ui-border-b show">
                    <label for="#">验证码</label>
                    <div class="form-qr-code-box">
                        <input type="text" placeholder="验证码" id="authCode">
                        <button type="button">发送验证码</button>
                    </div>
                </div>
            </div>

            <div class="step step4">
            	<footer class="ui-footer ui-footer-stable ui-border-t">
                    <div class="ui-footer-btns">
                        <button type="button" class="btn-footer btn-red" onclick="window.location.href='/scfire/project/start'">快速至发起项目</button>
                    </div>
                </footer>
                <div class="success-box">
  					<img alt="" class="ui-success-img" src="/scfire/static/images/ic_success.png">
                    <h4>提交成功!</h4>
                   	<p> 您的实名资料正在审核中，</p>
					<p>欢迎您在火堆上多多发起善举。</p>
                </div>

                <%--<a href="/scfire/project/start" class="ui-btn-lg btn-red btn-next" onclick="goProject()">快速至发起项目</a>            --%>
			</div>
        </form>
    </section>

    <div class="d-warning">
        <div class="txt">
            <h2>审核中</h2>
            <p>您的身份已提交并审核中</p>
        </div>
    </div>
    <script type="text/javascript">
        var nextFlag = true;

    	var isIdNumVailded = false;
    	var isPhoneNumVailded = false;
    	var isBankNumberVailded = false;
    	var authCodeStats       = false;
    	
    	(function() {
    		_init_area();
    		$('.form-common2 .form-single-img #Idimg').on('change', 'input[type=file]', function(){
    			 var files = [$('.form-single-img #Idimg input[type=file]').attr('id')]
      			$.ajaxFileUpload({  
         			url:'/scfire/project/imgSaveMb',  
         			secureuri:false,  
         			dataType:'text',
         			fileElementId:files,//file标签的id 
         			success: function (data, status) { 
    		           	if(data=='large'){
    		           		showWarn('图片过大')
    		           		return
    		           	}
    		       		if(data=='format'){
    		           		showWarn('图片格式不对')
    		           		return
    		           	}
    	               //把图片替换  
    	               if(data=='fail'){
    	               	showWarn('上传失败')
    	               }else{
    	                	 //图片预览
    	                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
    	                   $("#Idimg").css('background-image', 'url(' + imageurl + ')');
    	                   $("#Idimg").css('background-size', 'cover');
    	                   //图片地址赋值给后台
    	                   $("#identifyimg").val(data);
    	                   $("#img").replaceWith('<input type="file" name="img" id="img">');
    	                  //alert($("#identifyimg").val());   	                            
    	               }
    		           },  
    		           error: function (data, status, e) {  
    		           }
    		       	 });
            });
            

            $('.form-common2 .form-single-img #Idimgre').on('change', 'input[type=file]', function(){
            var files = [$('.form-single-img #Idimgre input[type=file]').attr('id')]
      			$.ajaxFileUpload({  
         			url:'/scfire/project/imgSaveMb',  
         			secureuri:false,  
         			dataType:'text',
         			fileElementId:files,//file标签的id 
         			success: function (data, status) { 
    		           	if(data=='large'){
    		           		showWarn('图片过大')
    		           		return
    		           	}
    		       		if(data=='format'){
    		           		showWarn('图片格式不对')
    		           		return
    		           	}
    	               //把图片替换  
    	               if(data=='fail'){
    	               	showWarn('上传失败')
    	               }else{
    	                	 //图片预览
    	                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
    	                   $("#Idimgre").css('background-image', 'url(' + imageurl + ')');
    	                   $("#Idimgre").css('background-size', 'cover');
    	                   //图片地址赋值给后台
    	                   $("#identifyimgre").val(data);
    	                   $("#imgre").replaceWith('<input type="file" name="imgre" id="imgre">');
    	                  //alert($("#identifyimgre").val());   	                            
    	               }
    		           },  
    		           error: function (data, status, e) {  
    		           }
    		       	 });
            });

    		$('.dialog-step .dialog-box .btn-close').click(function(){
                   $('.dialog-step').removeClass('show'); 
                });
            $('.form-common2 .form-photo-box > i').click(function(){
                $($(this).attr('data-link')).click();
            });
            
            $('.form-common2 .form-qr-code-box button').click(function(){
            	
                var obj = $(this).attr('disabled', true);
                obj.css("color","#bbbbbb");
                var count = null, i = 60;

                //发送短信
                var mobile = $('#mobile').val();
                if(!sendSMS(mobile)){
                	obj.css("color","#fb6e50");
                	 obj.removeAttr('disabled')
                    return
                }
                
                obj.text(i + '秒后重发');
                count = setInterval(function(){
                    i--;
                    if (i <= 0) {
                        obj.removeAttr('disabled').text('重发验证码');
                        obj.css("color","#fb6e50");
                        clearInterval(count)
                    } else {
                        obj.text(i + '秒后重发');
                    }
                }, 1000)
            });

            
            $('#img1').on('change', '.img-box-line:last-child input[type=file]', function(){
               
            });

            var bind_name = 'input';
            if (navigator.userAgent.indexOf("MSIE") != -1) {
                bind_name = 'propertychange';
            }
            
<%--            $('.count').bind(bind_name, function() {--%>
<%--                checkWords(this, $(this).attr('data-length'));--%>
<%--            })--%>
<%--            $('.count').blur(function() {--%>
<%--                if ($(this).val().length > $(this).attr('data-length')) {--%>
<%--                    $(this).val($(this).val().substr(0, $(this).attr('data-length')));--%>
<%--                }--%>
<%--            });--%>
            
        })();

    	 function checkWords (obj, n) {
    	        var c = 0;
    	        if ($(obj).val().length > n) {
    	            c = n-$(obj).val().length;
    	             $(obj).siblings('.count').css("color","red");
    	        } else {
    	            c = n - $(obj).val().length;
    	             $(obj).siblings('.count').css("color","#988e89"); 
    	        }
    	       $(obj).siblings('.count').text(c);
    	        
    	        //
    	        //$(obj).val($(obj).val().substr(0,n));
    	        
    	    }
    	 function subWord(obj, n){
    	    	if ($(obj).val().length > n) {
    	            //$(obj).val($(obj).val().substr(0,n));
    	        }
    	    }

    	</script>
</body>
</html>